import React, { Component } from 'react';
import { Radio, Card, Table, Select, Button } from 'antd';
import { connect } from 'dva';
import './Comparison.less';

const { Option } = Select;
const filterData = (arr, type) => {
  let f = arr.filter(item => {
    return item.type === type;
  });
  return f.length > 0 ? f[0].data : [];
};
/**
 *  经营绩效-竞品对比
 */
class Comparison extends Component {
  static displayName = 'Comparison';

  constructor(props) {
    super(props);
    this.state = {
      // type: '利润比对',
      numbers: [],
      compareCode: '',
      defaultCompany: '',
    };
  }

  componentDidMount() {
    const { dispatch, type } = this.props;
    // 获取对比公司数据
    dispatch({
      type: 'comparison/getInitList',
      payload: {
        type,
      },
    });
    // 获取所有可以对比的公司
    dispatch({
      type: 'comparison/getAllCompanies',
      payload: {},
    });
  }

  /**
   * 从属性有数据中筛选出对应type的数据
   */
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.allNumbers.length > 0 && nextProps.type.length > 0) {
      // console.log('筛选出的数据：', filterData(nextProps.allNumbers, nextProps.type));
      return {
        numbers: filterData(nextProps.allNumbers, nextProps.type),
      };
    }
    return null;
  }

  handleTypeChange = e => {
    const type = e.target.value;
    const { dispatch } = this.props;

    dispatch({
      type: 'comparison/setData',
      payload: {
        type,
      },
    });
    // window.setTimeout(() => {
    //   this.setState({ type });
    //   this.handleSearch();
    // }, 0);
  };

  handleChange = value => {
    this.setState({ compareCode: value });
  };

  handleSearch = () => {
    const { dispatch, cmp } = this.props;
    const { compareCode } = this.state;
    const code = compareCode || cmp.code;
    dispatch({
      type: 'comparison/getCompareList',
      payload: {
        company_code: code,
      },
    });
  };

  render() {
    const { type, numbers } = this.state;
    const { cmp, companies, defaultCompany } = this.props;
    const options = companies.map(d => <Option key={d[1]}>{d[0]}</Option>);

    const select = (
      <div>
        <Select
          showSearch
          initialValue={`${defaultCompany.name}(${defaultCompany.code})`}
          placeholder={`${cmp.name}(${cmp.code})`}
          style={{ width: '200px' }}
          defaultActiveFirstOption={false}
          showArrow
          filterOption={false}
          onSearch={this.handleSearch}
          onChange={this.handleChange}
          notFoundContent={null}
        >
          {options}
        </Select>
        <Button
          className="comparision-search-btn"
          type="primary"
          shape="circle"
          icon="search"
          onClick={this.handleSearch}
        />
      </div>
    );
    const colorTd = (num, record) => {
      const tdStyle =
        parseFloat(num) >= 0
          ? { backgroundColor: `rgba(102, 138, 194, ${num})` }
          : { backgroundColor: `rgba(231, 114, 112, ${num.substring(1)})` };
      return (
        <span className="comparision-color-bg" style={tdStyle}>
          {num}
        </span>
      );
    };

    const columns = [
      {
        title: '科目',
        dataIndex: 'item',
        key: 'item',
        width: 300,
      },
      {
        title: cmp.name,
        dataIndex: 'target',
        key: 'target',
        width: 300,
        render: colorTd,
      },
      {
        title: select,
        dataIndex: 'comparison',
        key: 'comparison',
        width: 300,
        render: colorTd,
      },
    ];

    return (
      <div>
        <Card>
          <Radio.Group
            onChange={this.handleTypeChange}
            defaultValue="利润比对"
            style={{ marginBottom: 8 }}
          >
            <Radio.Button value="利润比对">利润比对</Radio.Button>
            <Radio.Button value="利润比对(最新一期)">利润比对(最新一期)</Radio.Button>
            <Radio.Button value="营收比对">营收比对</Radio.Button>
            <Radio.Button value="营收比对(最新一期)">营收比对(最新一期)</Radio.Button>
          </Radio.Group>

          <Table pagination={false} dataSource={numbers} columns={columns} />
        </Card>
      </div>
    );
  }
}

export default connect(({ comparison }) => ({
  allNumbers: comparison.allNumbers,
  cmp: comparison.cmp,
  type: comparison.type,
  defaultCompany: comparison.defaultCompany,
  companies: comparison.companies,
}))(Comparison);
